/*
 * @Author: your name
 * @Date: 2021-03-29 19:25:32
 * @LastEditTime: 2021-05-30 18:28:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /game-sdk-backend/src/layouts/index.tsx
 */
import React, { useEffect, useState } from 'react';
import 'antd/dist/antd.less';
import { Layout, ConfigProvider } from 'antd';
import SiderbarMenu from './siderbarMenu';
import Header from './header';
import zhCN from 'antd/lib/locale/zh_CN';
import { Spin } from 'antd';
import { CompassOutlined } from '@ant-design/icons';
import { IMenu } from './interface';
import { globalModel } from '@/pages/globalModel';
import './index.less';
import '@/styles/index.less';
import { MenuList } from '@/routers';
import { observer, inject } from 'mobx-react';
import { Modal } from 'antd';
import { history } from 'umi';
interface IProps {
  children: React.ReactNode;
}
const whiteList = ['/login'];
export default observer((props: IProps) => {
  const pathname = location.pathname;
  const [menu, setMenu] = useState<IMenu[]>();
  const [state, setstate] = useState(false);

  useEffect(() => {
    if (!location.pathname.includes('/login')) {
      globalModel.getUserInfo();
    }
  }, []);

  useEffect(() => {
    globalModel.getUserSign();
  }, [globalModel.userInfo]);

  useEffect(() => {
    globalModel.userInfo &&
      setMenu(
        MenuList(globalModel.userInfo?.box_id, globalModel.userInfo?.is_super),
      );
  }, [globalModel.userInfo]);

  useEffect(() => {
    if (globalModel.receivedMsg?.type === 'APPLY_BELL') {
      Modal.confirm({
        title: '加钟申请',
        content: globalModel.receivedMsg.message + '快去处理吧！',
        okText: '去处理',
        cancelText: '稍后处理',
        onOk: () => {
          history.push(`/scheduleApply?refresh=${Math.random()}`);
        },
      });
    }
  }, [globalModel.receivedMsg]);

  return (
    <ConfigProvider locale={zhCN}>
      {globalModel.userInfo || location.pathname.includes('/login') ? (
        <Layout style={{ minHeight: '100vh' }}>
          {!whiteList.includes(pathname) && <Header />}
          <Layout className="container">
            {!whiteList.includes(pathname) && (
              <SiderbarMenu menu={menu || []} />
            )}
            <Layout.Content style={{ padding: '15px' }}>
              <Layout className="site-layout" style={{ minWidth: 1000 }}>
                {props.children}
              </Layout>
            </Layout.Content>
          </Layout>
        </Layout>
      ) : (
        <div style={{ textAlign: 'center', marginTop: 200 }}>
          <Spin></Spin>
        </div>
      )}
    </ConfigProvider>
  );
});
